<template>
	<view class="wrap">
		<view class="search">
			<u-sticky>
				<view class="sticky">
					<u-search placeholder="请输入调解员姓名" v-model="queryForm1.formData.keywords" @search="search"
						@custom="search" :show-action="true">
					</u-search>
				</view>
			</u-sticky>
		</view>

		
		<u-section title="组织成员" font-size="32" :right="false"></u-section>
		<view class="top">
			<view class="fast-search-bar">
				<view class="fast-search-button" :class="current==1?'cur':''" @click="searchByGroup(1)">特邀专家</view>
				<view class="fast-search-button" :class="current==0?'cur':''" @click="searchByGroup(0)">人民调解员</view>
			</view>
		</view>
		
		<view class="flex-content list-context">
			<block v-if="current == 0">
				<view class="demo-warter" v-for="(item, index) in flowList" :key="index">
					<image class="photo" :src="item.avatar" mode="aspectFill"></image>
					<view class="demo-title">
						{{item.nickname}}
					</view>
					<view class="row">
						<view class="row form-col">
							<view class="demo-price">{{item.caseSuccess || 0}}</view>
							<view class="">成功</view>
						</view>
						<view class="row form-col">
							<view class="demo-price">{{item.caseTotal || 0}}</view>
							<view class="">总数量</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="current == 1">
				<view class="demo-warter employee-card1" v-for="(item, index) in flowList" :key="index"
					@click="pageTo('/pages/intro/detail?id=' + item._id)">
					<view class="card-left">
						<image class="photo" :src="item.avatar" mode="aspectFill"></image>
						<view class="demo-title">
							{{item.nickname}}
						</view>
					</view>
					<view class="card-right">
						<view class="row-flex">
							<view class="card-right-row-label">职务：</view>
							<view class="row-text">{{item.job || ''}}</view>
						</view>
						<view class="row-flex">
							<view class="card-right-row-label">擅长领域：</view>
							<view class="row-text">{{item.field || ''}}</view>
						</view>
						<view class="row-flex">
							<view class="card-right-row-label">简介：</view>
							<view class="row-text row-content">{{item.comment || ''}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,

				form: {
					comment: '',
					screenshot: ['', '', '', '', '']
				},
				// 列表查询请求数据
				queryForm1: {
					// 分页数据
					pagination: {
						pageIndex: 1, //当前页码
						pageSize: 9, //每页显示数量
					},
					// 表单数据源
					formData: {
						keywords: "", // 关键字
						role: 'tiaojie_employee',
						group: 1, // 类型
					},
					// 查询匹配规则
					columns: [{
						key: "keywords",
						mode: "%%",
						fieldName: "nickname",
					}, {
						key: "role",
						mode: "="
					}, {
						key: "group",
						mode: "="
					}],
					// 排序规则
					sortRule: [{
						name: "sort",
						type: "asc"
					}, {
						name: "_add_time",
						type: "desc"
					}]
				},
				loadStatus: 'loadmore',
				flowList: [],
			}
		},
		// mounted() {
		// 	this.initPage();
		// },
		onLoad(options) {
			if (options.group) {
				this.current = Number(options.group)
				this.queryForm1.formData.group = Number(options.group);
			}
			this.initPage();
		},
		onReachBottom() {
			if (this.loadStatus == 'nomore' || this.loadStatus == 'loading') {
				return false;
			}
			this.loadStatus = 'loading';
			this.addRandomData();
		},
		methods: {
			initPage() {
				// #ifdef H5
				this.$nextTick(function() {
					// #endif
					this.getData();
					this.addRandomData();
					// #ifdef H5
				})
				// #endif
			},
			pageTo(url) {
				vk.navigateTo(url);
			},
			// 应用详情
			getData() {
				vk.callFunction({
						url: this.$api.AppInfo,
						loading: true,
						data: {
							appid: vk.getVuex('$app.appInfo.appId')
						},
					})
					.then(res => {
						console.log('应用详情', res)
						this.form = res.item
					})
			},
			search() {
				this.loadStatus = 'loading';
				this.queryForm1.pagination.pageIndex = 1;
				this.clear();
				this.addRandomData();
			},
			searchByGroup(group) {
				this.current = group;
				this.queryForm1.formData.group = group;
				this.search();
			},
			addRandomData() {
				// for(let i = 0; i < 10; i++) {
				// 	let index = this.$u.random(0, this.list.length - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.list[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }

				vk.callFunction({
						url: this.$api.EmployeeList,
						loading: true,
						data: {
							...this.queryForm1,
							// pagination: {
							// 	pageIndex: this.page.num, //当前页码
							// 	pageSize: this.page.size, //每页显示数量
							// },
						},
					})
					.then(res => {
						console.log('获取列表res', res)
						if (res.total > 0) {
							if (this.queryForm1.pagination.pageIndex == 1) this.clear();; //如果是第一页需手动置空列表
							this.flowList = this.flowList.concat(res.rows); //追加新数据
							this.queryForm1.pagination.pageIndex++;

							if (res.hasMore) {
								this.loadStatus = 'loadmore';
							} else {
								this.loadStatus = 'nomore';
							}
						} else {
							this.queryForm1.pagination.pageIndex = 1;
							this.clear();
							this.loadStatus = 'nomore';
						}
					})
			},
			clear() {
				this.flowList = [];
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style scoped>
	.banner {
		display: block;
		margin: 0 auto 24rpx;
		width: 90%;
		text-align: center;
	}

	.content {
		margin: 0 auto 24rpx;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.photo {
		width: 25vw;
		height: 32vw;
	}

	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #e1e1e1;
		color: #fff;
		padding: 24rpx;
	}

	.content {
		text-indent: 2em;
	}

	.top{
		margin: 10rpx 0 20rpx;
		padding: 10rpx 0;
		background-color: #fff;
	}
	.fast-search-bar {
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 70%;
	}

	.fast-search-button {
		padding: 12rpx 40rpx;
		background-color: aliceblue;
		border: beige 1px solid;
		border-radius: 10rpx;
	}

	.cur {
		background-color: lightskyblue;
		border: #5ABEF0 1px solid;
	}

	.list-context {
		min-height: 200px;
	}

	.search {
		margin-bottom: 20px;
	}

	.row-content {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical
	}
</style>